<template id="ueditor">
  <div class="app-rich-text">
    <textarea style="width: 90%;" :id="id"></textarea>
    <el-dialog title="" :visible.sync="attachmentDialogVisible" width="1200px" class="image-check-dialog">
      <file-select :need-select="true" @selected-img="attachmentSelected" @close-dialog="attachmentDialogVisible=false" :select-num="slider_limit"></file-select>
    </el-dialog>
  </div>
</template>
<script src="/static/admin/default/ueditor/ueditor.config.js"></script>
<script src="/static/admin/default/ueditor/ueditor.all.js"></script>
<script>
  Vue.component('ueditor', {
    template: '#ueditor',
    props: {
      value: null,
      simpleAttachment: false,
      labelIcon: {
        type: String,
        default: '插入图片',
      },
      isShowInsertImage: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        slider_limit: 999999,
        attachmentDialogVisible: false,
        id: 'ueditor-' + (Math.floor((Math.random() * 10000) + 1)),
        ue: null,
        tempContent: this.value,
        isInputChange: false,
      };
    },
    watch: {
      value(newVal, oldVal) {
        if (!this.isInputChange && newVal) {
          if (this.ue) {
            if (this.ue.isReady !== 1) {
              let self = this;
              let time = setInterval(() => {
                //循环查
                if (self.ue.isReady === 1) {
                  clearInterval(time);
                  self.ue.setContent(newVal);
                  self.isInputChange = false;
                }
              }, 100);
              return;
            }
            this.ue.setContent(newVal);
          } else {
            this.tempContent = newVal;
          }
        }
        this.isInputChange = false;
      },
    },
    mounted() {
      this.loadUe();
    },
    methods: {
      attachmentClosed() {
        this.attachmentDialogVisible = false;
      },
      attachmentSelected(e) {
        if (e.length) {
          let html = '';
          for (let i in e) {
            html += '<img src="' + e[i].url + '" style="max-width: 100%;">';
          }
          this.ue.execCommand('inserthtml', html);
        }
        this.attachmentDialogVisible = false;
      },
      loadUe() {
        const vm = this;
        this.ue = UE.getEditor(this.id);
        this.ue.addListener('ready', editor => {
          if (this.tempContent) {
            this.ue.setContent(this.tempContent);
          }
        });
        this.ue.addListener('keyup', editor => {
          this.isInputChange = true;
          this.$emit('input', this.ue.getContent());
        });
        this.ue.addListener('contentChange', editor => {
          this.isInputChange = true;
          this.$emit('input', this.ue.getContent());
        });
        let self = this;
        if (self.isShowInsertImage) {
          UE.registerUI('appinsertimage', (editor, uiName) => {
            return new UE.ui.Button({
              name: uiName,
              title: vm.labelIcon,
              //添加额外样式，指定icon图标，这里默认使用一个重复的icon
              cssRules: 'background-position: -381px 0px;',
              onclick() {
                self.ue = editor
                vm.attachmentDialogVisible = true;
              },
            });
          });
        }
      }
    },
  });
</script>

<style>
  .app-rich-text {
    line-height: normal;
  }

  .app-rich-text textarea,
  .app-rich-text .edui-editor {
    width: 100% !important;
  }
</style>